<template>
  <div id="info-container">
    <!--  头部  -->
    <div class="container middle">
      <div class="page-header">
        <div class="page-title">
          <h1>{{isfromLaywer ? '律师认证' : '个人认证'}}</h1>
          <p style="color:#999999;font-size: 12px"> <span style="color: red;">*</span> 注：需要填写相关认证信息，未认证需申请认证，认证审核由平台审核</p>
        </div>
        <div class="page-extend">
        </div>
      </div>
      <div class="page-body">
        <div class="info-box">
          <div class="input-item">
            <div class="input-label">真实姓名</div>
            <div class="input-content">
              <el-input placeholder="请输入真实姓名"></el-input>
            </div>
          </div>
          <div class="input-item">
            <div class="input-label">身份证号</div>
            <div class="input-content">
              <el-input placeholder="请输入真实姓名"></el-input>
            </div>
          </div>
        </div>
        <!---  律师  --->
        <div class="info-box">
          <div class="input-item">
            <div class="input-label">所在律师事务所</div>
            <div class="input-content">
              <el-input placeholder="请输入所在律师事务所"></el-input>
            </div>
          </div>
          <div class="input-item">
            <div class="input-label">律师执业证件号</div>
            <div class="input-content">
              <el-input placeholder="请输入律师执业证件号"></el-input>
            </div>
          </div>
        </div>
        <!---  机构  --->
        <div class="info-box">
          <div class="input-item">
            <div class="input-label">律所名称</div>
            <div class="input-content">
              <el-input placeholder="请输入律所名称"></el-input>
            </div>
          </div>
          <div class="input-item">
            <div class="input-label">统一社会信用代码</div>
            <div class="input-content">
              <el-input placeholder="请输入统一社会信用代码"></el-input>
            </div>
          </div>
        </div>
        <div class="info-box">
          <div class="input-item">
            <div class="input-label">机构地址</div>
            <div class="input-content">
              <el-input placeholder="请输入机构地址"></el-input>
            </div>
          </div>
          <div class="input-item">
            <div class="input-label">法定代表人</div>
            <div class="input-content">
              <el-input placeholder="请输入法定代表人"></el-input>
            </div>
          </div>
        </div>
        <!--- 身份证 --->
        <div class="info-box" style="align-items: baseline">
          <div class="input-item">
            <div class="input-label">身份证有效期</div>
            <div class="input-content">
              <el-input placeholder="请输入真实姓名"></el-input>
            </div>
          </div>
          <div class="input-item">
            <div class="input-label">联系电话</div>
            <div class="input-content">
              <el-input placeholder="请输入联系电话"></el-input>
              <div style="margin-top: 20px;display:flex;align-items: center;justify-content: space-between">
                <el-input placeholder="请输入验证码"></el-input>
                <el-button style="margin-left: 8px;border-radius: 2px" type="primary">获取验证码</el-button>
              </div>
            </div>
          </div>
        </div>
        <!--  身份证上传 个人和律师 -->
        <div class="credit-sfz" style="display:flex;padding-top: 30px">
          <!--  身份证上传 -->
          <div class="person" style="flex: 1;display: flex;align-items: flex-start">
            <div class="box-one">
              <p style="color: #666666;font-size: 20px;margin-bottom: 10px">上传身份证照片</p>
              <div class="upload-box">
                <div class="upload-item" style="margin-bottom: 15px">
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <div class="item-titme" style="margin-top: 15px">身份证正面照（国徽面）</div>
                </div>
                <div class="upload-item">
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <div class="item-titme" style="margin-top: 15px">身份证正面照（头像面）</div>
                </div>
              </div>
            </div>
            <div class="box-two" style="margin-left: 50px">
              <p style="color: #666666;font-size: 20px;margin-bottom: 10px">示例</p>
            </div>
          </div>
          <!--  律师证证上传 -->
          <div class="lawyer" style="flex: 1;display: flex;align-items: flex-start">
            <div class="box-one">
              <p style="color: #666666;font-size: 20px;margin-bottom: 10px">上传律师执业证书</p>
              <div class="upload-box">
                <div class="upload-item" style="margin-bottom: 15px">
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </div>
              </div>
            </div>
            <div class="box-two" style="margin-left: 50px">
              <p style="color: #666666;font-size: 20px;margin-bottom: 10px">示例</p>
            </div>
          </div>

          <!-- 营业执照上传 - 机构 -->
          <div v-if="false" class="lawyer" style="flex: 1;display: flex;align-items: flex-start">
            <div class="box-one">
              <p style="color: #666666;font-size: 20px;margin-bottom: 10px">上传营业执照</p>
              <div class="upload-box">
                <div class="upload-item" style="margin-bottom: 15px">
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </div>
              </div>
            </div>
            <div class="box-two" style="margin-left: 50px">
              <p style="color: #666666;font-size: 20px;margin-bottom: 10px">示例</p>
            </div>
          </div>
        </div>
        <!--  提交  -->
        <div class="submit-btn" style="margin-top: 50px">
          <el-button type="primary">申请认证</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserCredit",
  props: {
    isfromLaywer: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.info-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.input-item {
  flex: 1;
  padding-right: 50px;
}
.input-item .input-label {
  font-size: 18px;
  color: #666;
  margin-bottom: 10px;
}

.input-item >>> .el-input__inner{
  color: #999999;
  background: #F9F9F9;
  font-size: 16px;
  border-radius: 2px;
  border: 1px solid #eee;
}

.upload-box /deep/ input[type=file] {
  display: none;
}
</style>
